<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>homework02</title>
  <style>
    .container {
      margin: 0 auto;
      width:1000px;
      height: 500px;
      display: flex;
      justify-content: space-around;
    }
    .card {
      padding-top: 10px;
      width: 240px;
      height: 100%;
      margin: 0 auto;
      transition: 0.5s;
    }
    .card:hover{
      box-shadow: 0  0 30px #111;
    }

    .content {
      width: 220px;
      height: 200px;
      display: block;
      margin: 0 auto;
    }
    img {
      display: block;
      margin: 0 auto;
      border-radius: 50%;
      transition: 0.5s;
    }
    img :hover{
      opacity: 0;
    }
    a {
      display: block;
      width: 100px;
      height: 30px;
      color: #fff;
      background-color: pink;
      padding-top: 10px;
      text-align: center;
      border-radius: 10px;
      transition: 0.5s;
    }
    a:hover{
      background-color: red;
    }
    .header {
      opacity: 0.2;
      transition: 0.5s;
    }
    .header:hover{
      opacity: 1;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="card">
    <div class="header">
      <img src="https://picsum.photos/200/200/?random=1" alt="face">
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
        Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
        voluptatem voluptates, voluptatum!</p>
      <a href="" style="text-decoration:none;">Read More</a>
    </div>
  </div>

  <div class="card">
    <div class="header">
      <img src="https://picsum.photos/200/200/?random=2" alt="face">
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
        Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
        voluptatem voluptates, voluptatum!</p>
      <a href="" style="text-decoration:none;">Read More</a>
    </div>
  </div>
  <div class="card">
    <div class="header">
      <img src="https://picsum.photos/200/200/?random=3" alt="face">
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
        Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
        voluptatem voluptates, voluptatum!</p>
      <a href="" style="text-decoration:none;">Read More</a>
    </div>
  </div>
</div>

</body>
</html>